<template>
  <div>
    <!-- 表单部分 -->
    <el-card>
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        label-position="right"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="检索关键字">
              <el-input
                v-model="searchForm.keyword"
                placeholder="请输入检索关键字"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检索人">
              <el-input
                v-model="searchForm.username"
                placeholder="请输入检索人"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日志日期">
              <el-date-picker
                type="date"
                v-model="searchForm.time"
                placeholder="请选择日志日期"
                :style="selectWidth"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="onSearch"
                ><el-icon><Search /></el-icon>搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格部分 -->
    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 5px">
        <span style="font-size: 13px">批量删除:</span>
        <el-select
          v-model="deleteLog"
          :style="selectWidth"
          style="margin: 0 8px 0 8px"
        >
          <el-option :value="1" label="一年前日志"></el-option>
        </el-select>
        <el-button type="danger" plain :disabled="!deleteLog"
          ><el-icon><DeleteFilled /></el-icon>删除</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="keyword" label="检索关键字" />
        <el-table-column prop="username" label="检索人" />
        <el-table-column
          prop="time"
          label="检索时间"
          sortable
          :sort-orders="['descending', 'ascending']"
        />
        <el-table-column prop="status" label="成功标志">
          <template #default="{ row }">
            <el-tag
              v-if="row.status === 0"
              :disable-transitions="true"
              type="danger"
              size="small"
              >失败</el-tag
            >
            <el-tag
              v-if="row.status === 1"
              :disable-transitions="true"
              type="success"
              size="small"
              >成功</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog v-model="addDialogVisible" :title="title" width="35%">
      <span>日志内容:</span>
      <el-input type="textarea" v-model="content" :disabled="true"></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false" type="primary"
            >关 闭</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ref } from 'vue'

const deleteLog = ref()
const addDialogVisible = ref(false)
const total = ref(50)
const title = ref('')
const content = ref('')
const selectWidth = ref('width:200px')

// 搜索框
const searchForm = ref({
  keyword: '',
  username: '',
  time: ''
})
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const tableData = [
  {
    keyword: '客户操作日志',
    username: 'admin',
    time: '2025-01-16 11:45:27',
    status: 0
  },
  {
    keyword: '客户操作日志',
    username: 'admin',
    time: '2025-01-16 11:45:28',
    status: 0
  },
  {
    keyword: '客户操作日志',
    username: 'admin',
    time: '2025-01-18 11:45:28',
    status: 1
  }
]

// 搜索
const onSearch = () => {
  console.log('onSearch!')
}
const getList = () => {
  console.log('getList', queryParams.value)
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table {
    .el-table__header-wrapper {
      th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
      }
    }
  }
}
::v-deep {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-weight: bold !important;
      }
    }
  }
}

::v-deep {
  .el-form {
    .el-form-item .second_label {
      .el-form-item__label {
        font-weight: normal !important;
        margin-top: 10px;
      }
    }
  }
}
::v-deep {
  .second_label {
    .el-form-item__error {
      position: static !important;
    }
  }
}
</style>
